<template>
  <div class="tab-title-page goods_list">
    <div class="flex flex-between nav_tabs">
      <el-tabs
        v-model="activeName"
        class="flex-1"
        @tab-click="handleClick"
      >
        <el-tab-pane
          :label="`已上架商品(${count.status_put})`"
          name="1"
        />
        <el-tab-pane
          :label="`已下架商品(${count.status_off})`"
          name="2"
        />
        <el-tab-pane
          :label="`审核中商品(${count.status_check})`"
          name="3"
        />
      </el-tabs>
      <div class="right">
        <span
          class="pointer"
          @click="$router.push({name:'goodsDraft'})"
        >
          <svg-icon
            style="vertical-align: middle;"
            icon-class="draft"
            :size="20"
          />草稿箱 ({{ count.draft }})
        </span>
      </div>
    </div>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <online
        ref="listPage"
        :active-tab="activeName"
        :tab-count="count"
      />
    </div>
  </div>
</template>

<script>
import online from './child/online'
export default {
  components: { online },
  data() {
    return {
      activeName: '1',
      count: {
        draft: 0,
        status_put: 0,
        status_off: 0,
        status_check: 0
      }
    }
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$refs.listPage.getList()
    })
  }
}
</script>

<style lang="scss" scoped>
.nav_tabs .right {
  color: #999999;
  line-height: 40px;
}
.child_page {
  padding: 30px;
}
</style>
